﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#body {
				width: 800px;
				height: 600px;
				background-image: url(img/背景.png);
				margin: 0px auto;
				position: relative;
			}
			
			#top {
				height: 476px;
				position: relative;
			}
			
			#top div {
				width: 63px;
				height: 71px;
				background-image: url(img/苹果.png);
				position: absolute;
				font-size: 40px;
				line-height: 71px;
				text-align: center;
				color: white;
			}
			
			#top .gai {
				width: 138px;
				height: 76px;
				background-image: url(img/破裂苹果.png);
			}
			
			#wenben {
				position: relative;
				top: -50px;
				left: 350px;
				font-size: 15px;
				color: white;
			}
			
			#ks {
				background-color: transparent;
				position: relative;
				top: 47px;
				left: 195px;
				width: 50px;
				height: 50px;
				border-radius: 25px;
				border: 0px;
			}
			
			#zt {
				background-color: transparent;
				position: relative;
				top: 30px;
				left: 62px;
				width: 42px;
				height: 42px;
				border-radius: 21px;
				border: 0px;
			}
			
			#js {
				background-color: transparent;
				position: relative;
				top: 0px;
				left: 53px;
				width: 44px;
				height: 44px;
				border-radius: 22px;
				border: 0px;
			}
			
			#sz {
				background-color: transparent;
				position: relative;
				top: 65px;
				left: 0px;
				width: 44px;
				height: 44px;
				border-radius: 22px;
				border: 0px;
			}
			
			#foot {
				position: relative;
			}
			
			#pingguo_10 {
				position: absolute;
				top: 20px;
				right: 140px;
				display: none;
			}
			
			#pingguo_9 {
				position: absolute;
				top: 20px;
				right: 115px;
				display: none;
			}
			
			#pingguo_8 {
				position: absolute;
				top: 20px;
				right: 90px;
				display: none;
			}
			
			#pingguo_7 {
				position: absolute;
				top: 20px;
				right: 60px;
				display: none;
			}
			
			#pingguo_6 {
				position: absolute;
				top: 0px;
				right: 120px;
				display: none;
			}
			
			#pingguo_5 {
				position: absolute;
				top: 0px;
				right: 100px;
				display: none;
			}
			
			#pingguo_4 {
				position: absolute;
				top: 0px;
				right: 80px;
				display: none;
			}
			
			#pingguo_3 {
				position: absolute;
				top: -20px;
				right: 110px;
				display: none;
			}
			
			#pingguo_2 {
				position: absolute;
				top: -20px;
				right: 90px;
				display: none;
			}
			
			#pingguo_1 {
				position: absolute;
				top: -40px;
				right: 100px;
				display: none;
			}
			
			#img_lan {
				position: absolute;
				bottom: -50px;
				right: 30px;
			}
			
			#shezhiye {
				width: 448px;
				height: 311px;
				background-image: url(img/设置.png);
				position: absolute;
				top: 150px;
				left: 200px;
				/*display: none;*/
			}
			
			#select {
				position: absolute;
				top: 83px;
				left: 230px;
				width: 70px;
			}
			
			#text1 {
				position: absolute;
				top: 133px;
				left: 230px;
			}
			
			#text2 {
				position: absolute;
				top: 183px;
				left: 230px;
			}
			
			#btn1 {
				background-color: transparent;
				border: 0px;
				width: 70px;
				height: 30px;
				position: absolute;
				bottom: 17px;
				left: 186px;
			}
			
			#btn2 {
				background-color: transparent;
				border: 0px;
				width: 70px;
				height: 30px;
				position: absolute;
				bottom: 17px;
				left: 276px;
			}
			
			#btn3 {
				background-color: transparent;
				border: 0px;
				width: 70px;
				height: 30px;
				position: absolute;
				bottom: 17px;
				left: 370px;
			}
		</style>
		<script type="text/javascript">
			var h = 0;
			var m = 0;
			var s = 0;
			var sum = 0;
			var k = 0;
			var cpt = 0;
			var pgsum = 0;
			var zql = 0;
			var showpg = 10;
			var guoguan = 100;
			var shibai = 10;
			var dengji = 1;
			var z = 0;
			window.onkeydown = function() {
				var top = document.getElementById("top");
				var key = event.keyCode;
				for (var i = 0; i < top.children.length; i++) {
					var code = top.children[i].getAttribute("keycode")
					if (key == code) {
						k++;
						top.removeChild(top.children[i]);
						break;
					}
				}
				if (k == guoguan) {
					alert("恭喜您通关");
					jiesu();
				}
				if (k > 1 && k % 10 == 0) {
					document.getElementById("pingguo_" + showpg + "").style.display = "block";
					showpg--;
				}
			}

			function jishu() {
				var sum1 = document.getElementById("sum");
				var pgsudu = document.getElementById("pgsudu");
				if (sum == 0 && k == 0) {
					sum1.innerHTML = "0%"
				} else {
					pgsum = k + sum;
					zql = Math.ceil(k / pgsum * 100) + "%"
					sum1.innerHTML = zql;
				}
				var zonshi = s / 60 + m + h * 60
				pgsudu.innerHTML = Math.ceil(k / zonshi) + "个/分";
			}

			function kaishi() {
				if (cpt == 0) {
					cp = setInterval("createPG()", 1000);
					mp = setInterval("movePG()", 200);
					t = setInterval("time()", 1000);
					cpt = 1;
				}
			}

			function zanting() {
				clearInterval(cp);
				clearInterval(mp);
				clearInterval(t);
				cpt = 0;
			}

			function jiesu() {
				var top = document.getElementById("top");
				var time = document.getElementById("shijian");
				var sum1 = document.getElementById("sum");
				var pgsudu = document.getElementById("pgsudu");
				sum1.innerHTML = "0%";
				pgsudu.innerHTML = "0个/分";
				time.innerHTML = "00:00:00";
				top.innerHTML = null;
				sum = 0;
				pgsum = 0;
				zql = 0;
				h = 0;
				m = 0;
				s = 0;
				cpt = 0;
				guoguan = 100;
				shibai = 10;
				dengji = 1;
				z = 0;
				clearInterval(cp);
				clearInterval(mp);
				clearInterval(t);
				for (var i = 1; i <= 10; i++) {
					document.getElementById("pingguo_" + i + "").style.display = "none";
				}
			}

			function shezhi() {
				var szhi = document.getElementById("shezhiye");
				szhi.style.display = "block";
			}

			function qieding() {
				guoguan = document.getElementById("text1").value;
				shibai = document.getElementById("text2").value;
				dengji = document.getElementById("select").value;
				var szhi = document.getElementById("shezhiye");
				szhi.style.display = "none";
			}

			function quxiao() {
				var szhi = document.getElementById("shezhiye");
				szhi.style.display = "none";
			}

			function moren() {
				document.getElementById("select").value = "1";
				document.getElementById("text1").value = "100";
				document.getElementById("text2").value = "10";
			}

			function time() {
				s++;
				if (s == 60) {
					m++;
					s = 1;
				}
				if (m == 60) {
					h++;
					m = 0;
				}
				var time = document.getElementById("shijian");
				time.innerHTML = (h - 10 > 0 ? h : "0" + h) + ":" + (m - 10 > 0 ? m : "0" + m) + ":" + (s - 10 >= 0 ? s : "0" + s);
			}

			function movePG() {
				var top = document.getElementById("top");
				for (var i = 0; i < top.children.length; i++) {
					var t = parseInt(top.children[i].style.top);
					var sd2 = top.children[i].getAttribute("sudu");
					t += sd2 * 1;
					top.children[i].style.top = t + "px";
					if (t > 350) {
						top.children[i].innerHTML = null;
						top.children[i].className = "gai";
						sum++;
					}
					if (t > 400) {
						top.removeChild(top.children[i]);
						z++;
					}
					jishu();
					console.log(z);
					console.log(shibai);
					if (z == shibai) {
						alert("闯关失败");
						jiesu();
					}
				}
			}

			function createPG() {
				var div = document.createElement("div");
				var num = parseInt(Math.random() * 26) + 65;
				div.innerHTML = "&#" + num + ";";
				div.setAttribute("keycode", num);
				sd = sudu();
				div.setAttribute("sudu", sd);
				var left = parseInt(Math.random() * 700) + 10;
				div.style.left = left + "px";
				div.style.top = "0px";
				document.getElementById("top").appendChild(div);
			}

			function sudu() {
				var t = parseInt(Math.random() * 10) + 2*dengji;
				return t;
			}
		</script>
	</head>

	<body>
		<div id="body">
			<div id="top">
			</div>
			<div id="foot">
				<input id="ks" type="button" name="" value="" onclick="kaishi()" />
				<input id="zt" type="button" name="" value="" onclick="zanting()" />
				<input id="js" type="button" name="" value="" onclick="jiesu()" />
				<input id="sz" type="button" name="" value="" onclick="shezhi()" />
				<img id="pingguo_1" src="img/苹果2.png" />
				<img id="pingguo_2" src="img/苹果2.png" />
				<img id="pingguo_3" src="img/苹果2.png" />
				<img id="pingguo_4" src="img/苹果2.png" />
				<img id="pingguo_5" src="img/苹果2.png" />
				<img id="pingguo_6" src="img/苹果2.png" />
				<img id="pingguo_7" src="img/苹果2.png" />
				<img id="pingguo_8" src="img/苹果2.png" />
				<img id="pingguo_9" src="img/苹果2.png" />
				<img id="pingguo_10" src="img/苹果2.png" />
				<img id="img_lan" src="img/篮子.png" />
			</div>
			<div id="wenben">
				<p>正确率：<span id="sum">0%</span></p>
				<p>时间：<span id="shijian">00:00:00 </span></p>
				<p>速度：<span id="pgsudu">0个/分</span></p>
			</div>
			<div id="shezhiye">
				<select id="select">
					<option>1</option>
					<option>2</option>
					<option>3</option>
				</select>
				<input type="text" id="text1" value="100"/>
				<input type="text" id="text2" value="10"/>
				<input type="button" id="btn1" onclick="qieding()" />
				<input type="button" id="btn2" onclick="quxiao()" />
				<input type="button" id="btn3" onclick="moren()" />
			</div>
		</div>
	</body>

</html>